<template>
  <div>
    <!-- 编辑弹窗 -->
    <cvue-dialog
      :dialogVisible="dialogVisible"
      :title="title"
      :dialogLoading="dialogLoading"
      dialogWidth="500px"
      @handleOpen="getDetail"
      @closeDialog="closeDialog"
      @confirmDialog="confirmDialog"
      @handleClose="handleClose">
      <div class="dialog-body" slot="dialogBody">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="操作名称" prop="name">
                <el-select v-model="ruleForm.name" placeholder="请选择" style="width:100%" clearable @change="getValue">
                  <el-option
                    v-for="item in permissionCodeArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="操作标识" prop="permission">
                <el-input v-model.trim="ruleForm.permission" :disabled="true" placeholder="请先选择操作名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="关联菜单" prop="menu">
                <el-cascader 
                  v-model="ruleForm.menu" 
                  :options="menuOptions" 
                  style="width:100%"
                  :show-all-levels="false"
                  clearable
                  :props="treeProp"></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </cvue-dialog>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
import cvueDialog from '@/components/cvue-dialog'
import { validPhone, validIp, validIdCN } from '@/util/validator.js'
export default {
  name: 'permissionsEdit',
  components: {
    cvueDialog
  },
  data () {
    return {
      ruleForm: {
        name: '',
        permission: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入操作名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        permission: [
          { required: true, message: '请输入操作标识', trigger: 'blur' },
          { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' },
          { validator: validIdCN, trigger: 'blur' }
        ]
      },
      disabled: false,
      dialogLoading: false,
      status: 1,
      roles: [],
      appIds: [
        // {name: '应用1', id: '1'},
        // {name: '应用2', id: '2'}
      ],
      menuOptions: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: null
            }
          ]
        }
      ],
      treeProp: {
        value: 'id',
        label: 'title'
      },
      menuList: [],
      permissionCodeArr: []
    }
  },
  mounted () {
    this.getMenusTree()
    this.getMenus()
    this.getDict()
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    title () {
      var title = ''
      if (this.$parent.actionType == 'add') {
        title = '新增'
      } else {
        title = '编辑'
      }
      return title
    },
    ...mapGetters(['token'])
  },
  methods: {
    getDict () {
      this.tableLoading = true
      var params = {
        page: 1,
        limit: 50,
        name: 'permission_code'
      }
      this.$store.dispatch('manage/DictGet', params).then(res => {
        // console.log(res)
        var data = res.data.datas
        this.permissionCodeArr = data
        this.tableLoading = false
      }).catch(err => {
        console.log(err)
        this.tableLoading = false
      })
    },
    getValue (value) {
      this.permissionCodeArr.forEach((item, index) => {
        if (item.label == value) {
           this.$set(this.ruleForm, 'permission', item.value)
        }
      })
    },
    // 触发事件
    handleClose () {
      this.$emit('handleClose')
    },
    closeDialog () {
      this.$emit('closeDialog')
    },
    confirmDialog () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          var params
          if (this.$parent.actionType == 'add') {
            params = {
              id: '',
              code: this.ruleForm.permission,
              name: this.ruleForm.name,
              menu_id: this.ruleForm.menu[this.ruleForm.menu.length - 1]
            }
            // console.log(params)
            this.dialogLoading = true
            this.$store.dispatch('manage/PermissionPost', params).then(res => {
              // console.log(res)
              this.$message({
                message: res.msg,
                duration: 2000,
                type: 'success'
              })
              this.$emit('confirmDialog')
              this.dialogLoading = false
            }).catch(err => {
              this.$message({
                message: err.msg,
                duration: 2000,
                type: 'error'
              })
              this.dialogLoading = false
            })
          } else {
            params = {
              id: this.$parent.rowData.id,
              code: this.ruleForm.permission,
              name: this.ruleForm.name,
              menu_id: this.ruleForm.menu[this.ruleForm.menu.length - 1]
            }
            // console.log(params)
            this.dialogLoading = true
            this.$store.dispatch('manage/PermissionPut', params).then(res => {
              // console.log(res)
              this.$message({
                message: res.msg,
                duration: 2000,
                type: 'success'
              })
              this.$emit('confirmDialog')
              this.dialogLoading = false
            }).catch(err => {
              this.$message({
                message: err.msg,
                duration: 2000,
                type: 'error'
              })
              this.dialogLoading = false
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getDetail () {
    },
    getEditDetail () {
      if (this.$parent.actionType == 'edit') {
        this.$set(this.ruleForm, 'name', this.$parent.rowData.name)
        this.$set(this.ruleForm, 'permission', this.$parent.rowData.code)
        var menuIds = this.getMenuIds(this.menuList, this.$parent.rowData.menu_id)
        this.$set(this.ruleForm, 'menu', menuIds)
      }
    },
    getMenuIds (menuList, id) {
      var arr = [id]
      for (var i = 0; i < menuList.length; i++) {
        if (menuList[i].id == id) {
          arr.unshift(menuList[i].pid)
          this.getMenuIds(menuList, menuList[i].pid)
        }
      }
      return arr
    },
    getMenusTree () {
      var params = {}
      this.$store.dispatch('manage/MenuTreeGet', params).then(res => {
        // console.log(res)
        this.menuOptions = res.data
      })
    },
    getMenus () {
      var params = {}
      this.$store.dispatch('manage/MenuGet', params).then(res => {
        if (res) {
          this.menuList = res.data
          this.getEditDetail()
        }
      }).catch(err => {
        this.$message({type: 'error', message: err.msg})
      })
    }
  }
}
</script>
<style scoped>
</style>
